<template>
  <view class="container">
    <sc-navbar back title="骨板层详情"></sc-navbar>
    <glo-gutter>
      <view class="detail-img">
        <sc-image height="100%" round="8" :src="detailData.info.boardImageAddress" width="100%"></sc-image>
      </view>
      <glo-chunk>
        <sc-flex>
          <sc-image height="37" src="/static/imgs/ic_wenda.png" width="37"></sc-image>
          <glo-title title="骨板层详细信息"></glo-title>
        </sc-flex>
        <glo-info :info="getDetailInfo(detailData.info)" font-size="24" line-height="49" mt="13"></glo-info>
      </glo-chunk>
      <glo-include name="所含商品">
        <glo-chunk v-for="item in detailData.list" :key="item.id" shadow @click="handleDetail(item)">
          <sc-flex ai="center" jc="between">
            <glo-title :title="item.productName"></glo-title>
            <sc-icon color="primary" name="arrow-right" size="20"></sc-icon>
          </sc-flex>
          <sc-flex ai="center" col-gap="17" mt="15">
            <sc-image :src="item.nailboxImageAddress" height="90" width="90"></sc-image>
            <glo-info :info="getCommodityInfo(item)"></glo-info>
          </sc-flex>
        </glo-chunk>
      </glo-include>
    </glo-gutter>
    <sc-flex col-gap="20" jc="center" padding="90rpx 0 30rpx">
      <sc-button height="75" text="上传合格证" type="white" width="262" @click="goCertificate"></sc-button>
    </sc-flex>
  </view>
</template>
<script setup>
const temporaryStore = useTemporaryStore();

const detailData = reactive({
  info: {},
  list: [],
});
const getDetailInfo = (item) => {
  return [
    {
      type: "single",
      label: "序号",
      value: item.serialNumber,
    },
    {
      type: "single",
      label: "骨钉层编号",
      value: item.boardCode,
    },
    {
      type: "single",
      label: "所含数量",
      value: item.containCount,
    },
    {
      type: "single",
      label: "骨钉层条码",
      value: item.boardBarcode,
    },
  ];
};
const getCommodityInfo = (item) => {
  return [
    {
      type: "multiple",
      columns: "290rpx 1fr",
      list: [
        {
          type: "single",
          label: "商品编码",
          value: item.productCode,
        },
        {
          type: "single",
          label: "数量",
          value: item.containCount,
        },
      ],
    },
    {
      type: "multiple",
      columns: "290rpx 1fr",
      list: [
        {
          type: "single",
          label: "规格",
          value: item.specifications,
        },
        {
          type: "single",
          label: "型号",
          value: item.model,
        },
      ],
    },
    {
      type: "multiple",
      columns: "290rpx 1fr",
      list: [
        {
          type: "single",
          label: "批号",
          value: item.productBatchNumber,
        },
        {
          type: "single",
          label: "追踪码",
          value: item.trackingCode,
        },
      ],
    },
    {
      type: "multiple",
      columns: "290rpx 1fr",
      list: [
        {
          type: "single",
          label: "生产日期",
          value: item.productionDate,
        },
        {
          type: "single",
          label: "有效期",
          value: item.validityDate,
        },
      ],
    },
    {
      type: "single",
      label: "商品来源",
      value: item.productSource,
    },
    {
      type: "single",
      label: "注册证号",
      value: item.registrationCertificateNumber,
    },
    {
      type: "single",
      label: "厂家",
      value: item.manufacturerName,
    },
    {
      type: "single",
      label: "UDI条码",
      value: item.udiCode,
    },
  ];
};
onLoad(() => {
  const data = temporaryStore.product;
  detailData.info = data;
  detailData.list = data.productEntityManagementRespVOList;
});

const handleDetail = (item) => {
  temporaryStore.setCommodity(item);
  uni.navigateTo({
    url: `/subDingHe/pages/commodityDetail`,
  });
};
const goCertificate = () => {
  temporaryStore.setCertificate({
    nailboxCode: detailData.info.productDataAssociationCode,
    boardCode: detailData.info.boardCode,
  });
  uni.navigateTo({
    url: `/subPublic/pages/qualifiedCertificate`,
  });
};
</script>
<style lang="scss">
page {
  background: $color-bg;
}
</style>
<style lang="scss" scoped>
.detail-img {
  width: 100%;
  height: 778rpx;
  border-radius: 8rpx;
}

.detail-info {
  padding: 17rpx 25rpx 58rpx;
  border-radius: 15rpx;
  background: #ffffff;

  .info-item {
    color: #767676;
    font-weight: 400;
    font-size: 26rpx;
    font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
    line-height: 49rpx;
  }
}

.product-item {
  padding: 17rpx 24rpx 24rpx;
  border: 2rpx solid #f3f3f3;
  border-radius: 15rpx 15rpx 15rpx 15rpx;
  background: #ffffff;
}
</style>
